<template>
    <div class="sheep-detail-container" v-loading="loading">

        <!-- 羊只基本信息卡片 -->
        <el-card class="sheep-info-card" v-if="!loading && sheep.EarNumber">
            <!-- 耳号标签和状态 -->
            <div class="ear-number-section">
                <el-tag type="danger" size="large" class="ear-tag">{{ sheep.EarNumber }}</el-tag>
                <el-tag type="success" size="small" class="status-tag">
                    <el-icon>
                        <CircleCheck />
                    </el-icon>
                    {{ sheep.PresentStatus || '在场' }}
                </el-tag>
                <el-tag v-if="sheep.PregnancyDays" type="warning" size="small" class="breeding-tag">
                    配种 {{ sheep.PregnancyDays }}天 ({{ sheep.PregnancyTest || '未妊检' }})
                </el-tag>
                <el-button link type="primary" @click="router.push('/SheepFilesList')">返回</el-button>
            </div>

            <!-- 下载和电子档案按钮 -->
            <div class="action-buttons">
                <el-button type="primary" size="small">
                    <el-icon>
                        <Download />
                    </el-icon>
                    {{ sheep.House_name || '大羊舍' }}-{{ sheep.Field_Name || '333' }}
                </el-button>
                <el-button type="info" size="small">
                    <el-icon>
                        <Document />
                    </el-icon>
                    电子档案
                </el-button>
            </div>

            <!-- 详细信息表格 -->
            <div class="info-grid">
                <div class="info-row">
                    <div class="info-item">
                        <span class="label">品种:</span>
                        <span class="value">{{ sheep.Variety || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">性别:</span>
                        <span class="value">{{ sheep.Sex || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">父耳号:</span>
                        <el-tag type="primary" size="small">{{ sheep.FatherEarNumber || '-' }}</el-tag>
                    </div>
                    <div class="info-item">
                        <span class="label">母耳号:</span>
                        <el-tag type="danger" size="small">{{ sheep.MotherEarNumber || '-' }}</el-tag>
                    </div>
                    <div class="info-item">
                        <span class="label">出生日期:</span>
                        <span class="value">{{ formatDate(sheep.Birthday) || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">出生重:</span>
                        <span class="value">{{ sheep.BirthWeight || '0' }}公斤</span>
                    </div>
                </div>

                <div class="info-row">
                    <div class="info-item">
                        <span class="label">出生地点:</span>
                        <span class="value">{{ sheep.BirthPlace || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">断奶日期:</span>
                        <span class="value">{{ formatDate(sheep.WeaningDate) || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">断奶重:</span>
                        <span class="value">{{ sheep.WeaningWeight || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">日龄:</span>
                        <span class="value">{{ sheep.AgeByDay || sheep.DayAge || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">月龄:</span>
                        <span class="value">{{ sheep.AgeByMonth || sheep.MonthAge || '-' }}</span>
                    </div>

                </div>

                <div class="info-row">
                    <div class="info-item">
                        <span class="label">生产等级:</span>
                        <span class="value">{{ sheep.ProductionGrade || sheep.ProductionLevel || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">基因等级:</span>
                        <span class="value">{{ sheep.GeneLevel || sheep.GeneticLevel || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">销售等级:</span>
                        <span class="value">{{ sheep.SalesLevel || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">繁殖方式:</span>
                        <span class="value">{{ sheep.BreedingMethod || sheep.ReproductionMethod || '-' }}</span>
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-item">
                        <span class="label">创建人:</span>
                        <span class="value">{{ sheep.Creator || '阿浩' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">修改人:</span>
                        <span class="value">{{ sheep.Modifier || '阿浩' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">创建时间:</span>
                        <span class="value">{{ formatDateTime(sheep.Birthday) || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">修改时间:</span>
                        <span class="value">{{ formatDateTime(sheep.WeaningDate) || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">电子耳号:</span>
                        <span class="value">{{ sheep.ELEarNumber || '-' }}</span>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 无数据提示 -->
        <el-empty v-if="!loading && !sheep.EarNumber" description="暂无羊只档案数据" />

        <!-- Tab页 -->
        <el-tabs v-model="activeTab" class="detail-tabs" v-if="!loading && sheep.EarNumber">
            <el-tab-pane label="系谱" name="pedigree">
                <div class="pedigree-container">
                    <PedigreeTree :sheep-data="sheep" />
                </div>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Sheep_BreedingRead } from '@/utils/Interceptors'
import { ElMessage } from 'element-plus'
import { CircleCheck, Download, Document } from '@element-plus/icons-vue'
import PedigreeTree from '@/components/PedigreeTree.vue'

const sheep = ref<any>({})
const activeTab = ref('pedigree')
const loading = ref(false)
const route = useRoute()
const router = useRouter()
// 格式化日期
const formatDate = (dateStr: string) => {
    if (!dateStr) return ''
    return dateStr.split('T')[0]
}

// 格式化日期时间
const formatDateTime = (dateStr: string) => {
    if (!dateStr) return ''
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}

// 获取羊只详情数据
const fetchDetail = async () => {
    loading.value = true
    const id = Number(route.query.id)

    console.log('从路由获取的ID:', id) // 调试用

    if (!id || isNaN(id)) {
        ElMessage.error('缺少有效的羊只ID')
        loading.value = false
        return
    }

    try {
        const res = await Sheep_BreedingRead.get(`/api/SheepFiles/GetById`, { params: { id } })
        console.log('API返回的完整数据:', res.data) // 调试用

        if (res.data && res.data.code === 200) {
            sheep.value = res.data.data || {}
            console.log('设置的羊只数据:', sheep.value) // 调试用
        } else {
            ElMessage.error(res.data?.msg || '获取详情失败')
            sheep.value = {}
        }
    } catch (error) {
        console.error('获取详情异常:', error)
        ElMessage.error('获取详情失败，请稍后重试')
        sheep.value = {}
    } finally {
        loading.value = false
    }
}

// 监听路由变化，重新获取数据
watch(() => route.query.id, (newId) => {
    if (newId) {
        fetchDetail()
    }
}, { immediate: false })

onMounted(() => {
    fetchDetail()
})
</script>

<style scoped>
.sheep-detail-container {
    padding: 16px;
    background: #f5f7fa;
    min-height: 100vh;
}

.top-tabs {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
}

.sheep-info-card {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ear-number-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ear-tag {
    font-size: 18px;
    font-weight: bold;
    padding: 8px 16px;
}

.status-tag {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.info-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.value {
    font-size: 14px;
    color: #333;
    font-weight: 400;
}

.detail-tabs {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pedigree-container {
    min-height: 400px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .info-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .info-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .ear-number-section {
        flex-wrap: wrap;
    }

    .action-buttons {
        flex-wrap: wrap;
    }
}
</style>



